<template>
	<div class="PcBookDetail">
		<div class="header">
			<a @click="$router.go(-1)">返回首页</a>
		    <h4>相关书籍推荐</h4>
		</div>
		<div class="box1">
			<div class="img" >
				<img  :src="`${$ip}/api/public/showimg/${book.pic}`"/>
			</div>
			<div class="books">
				<table>
					<tr>
						<td colspan="2"><h3>{{book.name}}</h3></td>
					</tr>
					<tr>
						<td>类别:</td>
						<td>{{book.type.name}}</td>
					</tr>
					<tr>
						<td>出版社:</td>
						<td>{{book.maker}}</td>
					</tr>
					<tr>
						<td>作者:</td>
						<td>{{book.author}}</td>
					</tr>
					<tr>
						<td>出版时间:</td>
						<td>{{findDate}}</td>
					</tr>
					<tr>
						<td>出版号:</td>
						<td>{{book.sn}}</td>
					</tr>
					<tr>
						<td>价格:</td>
						<td>{{book.price}}</td>
					</tr>
				</table>
					<div class="text">
						<p>详情：{{book.info}}</p>
					</div>
				<button class="btn" @click="addCart()"><i class="el-icon-shopping-cart-2"></i>加入购物车</button>
			</div>
			<div class="much">
				<ul>
					<li v-for="(item,index) in books" :key="item.id">
							<div class="img2">
								<a href="javascript:void(0)" @click="find(item.id)">
									<img  :src="`${$ip}/api/public/showimg/${item.pic}`"/>
								</a>	
							</div>
							<aside>
								
								<h5>{{item.name}}</h5>
								
								<span>{{item.maker}}</span>
							</aside>
							<aside>
								<h5>￥{{item.price}}</h5>
								<span>{{item.author}}</span>
							</aside>
					</li>
				</ul>
			</div>
		</div>
		<div class="say">
			<header>商品评论({{total}})</header>
			<div v-show="comment.length == 0" class="comm">
				<img class="one"  src="../../assets/img/pc/{25C427A7-CB89-48dd-8D5E-FDC2681A618A}.png"/>
			</div>
			<div class="comm"  v-for="(item,i) in comment" :key="item.id"  v-show="comment.length != 0">
				<aside class="c1">
					<img :src="`${$ip}/api/public/showimg/${item.img}`"/>
					<p>{{item.nickname}}</p>
				</aside>
				<aside class="c3">
					<span>{{item.content}}</span>
				</aside>
				<aside class="c2">
					<el-rate
					  v-model="item.rate"
					  disabled
					  show-score
					  text-color="#ff9900"
					  score-template="{value}">
					</el-rate>
					<span>{{date(item.tpost)}}</span>
				</aside>
			</div>
			<div class="sayimg">
				<textarea placeholder="请输入你的评论"  v-model="val" ></textarea>
				<button @click="AddRate()"><i class="el-icon-edit"></i>发表</button>
				 <el-rate v-model="content"></el-rate>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"PcBookDetail",
		data() {
			return{
				book:{
					type:{
						id:0,
						isdel:0,
						name:'',
						pid:0,
						prio:0,
					}
				},
				books:[],
				comment:[],
				value:5,
				val:'',
				content:0,
				total:0,
				pagenum:1,
				lines:6,
				bookid:0,
			}
		},
		methods:{
			findComment(){
				this.$get('/api/public/rate/findByBookid/'+this.bookid+'/'+this.pagenum+'/'+this.lines)
				.then((resp)=>{
					console.log(resp.data.data);
					this.comment = resp.data.data.comments;
					console.log(this.comment);
					this.total = resp.data.data.total;
				})
			},
			AddRate(){
				this.$postkv('/api/public/rate/add/'+this.bookid,
				{content:this.val,rate:this.content}).then((resp)=>{
					this.$message({
						message:resp.data.msg,
						type:'success'
					})
					this.findComment();
				})
			},
			addCart(){
				this.$get('/api/public/addCart/'+this.bookid).then((resp)=>{
					this.$message({
						message:resp.data.msg,
						type:'success'
					})
					
				})
			},
			find(id){
				this.bookid = id;
				this.findBook();
			},
			findBook(){
				this.$get('/api/public/book/findById/'+this.bookid).then((resp)=>{
					this.book =resp.data.data; 
				this.$get(`/api/public/findPageBook/1/6/${this.book.type.id}`).then((resp)=>{
				           this.books = resp.data.data.books;
						   console.log(this.books);
			       })
					
			   })
			}
		},
		computed:{
			date(){
				return (val)=>{
					let y = new Date(val).getFullYear();
					let m = new Date(val).getMonth();
					let r = new Date(val).getDate();
					return `${y}-${m}-${r}` ;
				}
			},
			findDate(){
					let y = new Date(this.book.tmake).getFullYear();
					let m = new Date(this.book.tmake).getMonth();
					let r = new Date(this.book.tmake).getDate();
					return `${y}-${m}-${r}` ;
			},
		},
		mounted() {
			this.bookid =this.$route.params.bookid;
			this.findComment();
			this.findBook();
		}
	}
</script>

<style scoped>
	.header{
		display: flex;
		justify-content: space-between;
	}
	.header h4{
		background-color: red;
		color: white;
		width: 200px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-top-left-radius: 8px;
	}
	*{
		margin: 0;
		padding: 0;
	}
	a{
		
		color: black;
	}
	.PcBookDetail{
		width: 80%;
		margin: 50px auto;
		
	}
	.box1{
		width: 100%;
		border-top: 2px solid crimson;
		display: flex;
	}
	.img{
		width: 25%;
		height: 35vh;
		margin-top: 20px;
		position: relative;
		border: 1px solid gainsboro;
	}
	.img img{
		width: 80%;
		height: 90%;
		position: absolute;
		top: 5%;
		left: 10%;
	}
	.books{
		width: 40%;
		/* height: 70vh */
		margin: 20px 50px 0px 50px;
	}
	.books table{
		width: 80%;
		overflow-wrap: normal;
		margin-left: 20px;
	}
	.books table tr{
		height: 30px;
	}
	.books table  td:first-child{
		width: 20%;
	}
	.books p{
		display: block;
		width: 80%;
		margin: 20px 0px 0px 20px;
	}
	.btn{
		width: 150px;
		background: red;
		color: white;
		height: 40px;
		border-radius:  5px;
		border: none;
		font-size: 15px;
		margin: 50px 0px 0px 20px;
	}
	.much{
		width: 30%;
	}
	.much ul{
		width: 100%;
	}
	.much ul li{
		display: flex;
		width: 100%;
		height: 10vh;
		background-color: azure;
		margin-bottom: 10px;
		border: 1px solid gainsboro;
	}
	.much ul li .img2{
		width: 20%;
		height: 100%;
	}
	.much ul li .img2 img{
		width: 100%;
		height: 100%;
	}
	.much ul li aside{
		text-align: center;
		width: 40%;
		height: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.much ul li aside h5{
		margin: 10px 0px 20px 0px;
	}
	.much ul li aside span{
		font-size: 14px;
	}
	.say{
		width: 70%;
		margin-top: 20px;
		border-top: 2px solid red;
		
	}
	.say header{
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: gainsboro;
		text-indent: 15px;
	}
	.say .one{
		display: block;
		margin: 0 auto;
	}
	.comm{
		display: flex;
		overflow: hidden;
		position: relative;
		border-bottom:2px solid gray ;
	}
	.comm .c1 {
		margin-top: 20px;
		width: 100px;
		height: 100px;
		text-align: center;
		text-overflow: ellipsis;
		margin-bottom: 20px;
	}
	.comm .c1 img{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-top: 10px;
		position: relative;
	}
	.c2{
		height: 100%;
		width: 150px;
		position: absolute;
		left: 80%;
		top: 10px;
		
	}
	.c2 span{
		position: absolute;
		right: 40%;
		bottom: 20px;
	}
	.c3{
		width: 80%;
		height: 100%;
		margin: 30px 20px 10px 20px;
	}
	.sayimg{
		width: 100%;
		position: relative;
	}
	.sayimg textarea{
		width: 100%;
		height: 100px;
		border: 2px solid gainsboro;
		outline: none;
		text-indent: 15px;
		resize: none;
	}
	.sayimg button{
		width: 80Px;
		height: 30px;
		background-color: red;
		color: white;
		border: none;
		outline: none;
		border-radius: 5px;
		position: absolute;
		top: 60px;
		right: 20px;
	}
	.sayimg  span{
		font-size: 12px;
		color: gray;
		position: absolute;
		top: 70px;
		right: 120px;
	}
	.sayimg .el-rate{
		position: absolute;
		top: 70px;
		left: 20px;
	}
</style>